<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
	 <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
		<title></title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
		<link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/app.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/themes/default.css}" media="all" id="skin" kit-skin />
		<script th:src="@{/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
  		<script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
		<script type="text/javascript">
				//更新所有的下拉选项
				function querySelect(){
					//组织项下拉框拼接
					var org = "";
					$.ajax({
						type:"post",
						url:"/organization/getAll.do",//从数据库查询所有的组织
						dataType:"json",
						contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				        async: false,
				        cache: false,
						success:function(data){
							for(var i=0;i<data.length;i++){
								org+="<option value="+data[i].organization_id+">"+data[i].organization_name+"</option>";
							}
							$("#add-org").html(org);
// 							alert("循环结束"+$("#add-org").html());
						}
					});
					//更新部门下拉框
					var dep="";
					$.ajax({
						type:"post",
						url:"/department/selectAll",//从数据库查询所有的部门
			            dataType: "json",
			            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				        async: false,
				        cache: false,
						success:function(data){
							for(var i=0;i<data.data.length;i++){
								dep+="<option value="+data.data[i].department_id+">"+data.data[i].department_name+"</option>";
							}
							$("#add-dep").html(dep);
						}
					});
					
					var roles="";
					$.ajax({
						type:"post",
						url:"/role/selectAllRole",//从数据库查询所有的部门
			            dataType: "json",
			            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				        async: false,
				        cache: false,
						success:function(data){
							for(var i=0;i<data.data.length;i++){
								roles+="<input type='checkbox' name='role' value='"+data.data[i].role_id+"' title='"+data.data[i].role_name+"'>"
							}
							$("#add-role").html(roles);
						}
					});
					
					var menus = "";
					$.ajax({
								type : "post",
								url : "/menu/selectAllMenu",//从数据库查询所有的菜单
								dataType : "json",
								contentType : "application/x-www-form-urlencoded; charset=UTF-8",
								async : false,
								cache : false,
								success : function(data) {
									for (var i = 0; i < data.data.length; i++) {
										menus += "<input type='checkbox' name='menu' value='"+data.data[i].menu_id+"' title='"+data.data[i].description+"'>"
									}
									$("#add-menu").html(menus);
								}
							});
				}
		</script>
		<script type="text/javascript">
		function child(data){
			var data=data;
			querySelect();
			var form=layui.form;
// 			alert(data[0].department.department_id);
			form.val("test", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
				   "ID":data[0].user_id
				  ,"username": data[0].username // "name": "value"
				  ,"account": data[0].account
				  ,"department":data[0].department.department_id
				  ,"organization":data[0].organization.organization_id
				  ,"status":data[0].status
				});
			var roles=[];
			for(var i=0;i<data[0].roles.length;i++){
				roles.push(data[0].roles[i].role_name);
			}
			var menus=[];
			for(var i=0;i<data[0].menus.length;i++){
				menus.push(data[0].menus[i].menu_name);
			}
			//注意，下面重新去判断并让设置复选框但不会让表单渲染，实际数据有，此时需要重新渲染
			//毕竟layui目前提供的渲染并非双向的
			for(var j=0;j<roles.length;j++){
				var roleCheckbox=$("input[name='role']");
				for(var k=0;k<roleCheckbox.length;k++){
					if(roleCheckbox[k].title==roles[j]){
						roleCheckbox[k].checked=true;
					}
				}
		}
			for(var j=0;j<menus.length;j++){
				var menuCheckbox=$("input[name='menu']");
				for(var k=0;k<menuCheckbox.length;k++){
					if(menuCheckbox[k].title==menus[j]){
						 menuCheckbox[k].checked=true;
					}
				}
		}
			//重新渲染，否则不会显示(实际数据是有的)
			form.render();
	}
		</script>
	</head>
	<body>
			<form class="layui-form" action="" lay-filter="test">
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input type="text" id="ID" name="ID" required  lay-verify="required" placeholder="ID" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">登录名</label>
    <div class="layui-input-block">
      <input type="text" id="add-username" name="username" required  lay-verify="required" placeholder="login登录页面账号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">真实姓名</label>
    <div class="layui-input-block">
      <input type="text" id="add-account"name="account" required  lay-verify="required" placeholder="公司员工姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">部门</label>
    <div class="layui-input-block">
      <select id="add-dep" name="department" lay-verify="required">
      
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">所在组织</label>
    <div class="layui-input-block">
      <select id="add-org" name="organization" lay-verify="required">
      
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div id="add-role" class="layui-input-block">
    
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">菜单</label>
    <div id="add-menu" class="layui-input-block">
    
    </div>
  </div>
<!--   <div class="layui-form-item"> -->
<!--     <label class="layui-form-label">开关</label> -->
<!--     <div class="layui-input-block"> -->
<!--       <input type="checkbox" name="switch" lay-skin="switch"> -->
<!--     </div> -->
<!--   </div> -->
  <div class="layui-form-item">
    <label class="layui-form-label">账户状态</label>
    <div class="layui-input-block">
      <input type="radio" name="status" value="1" title="可用">
      <input type="radio" name="status" value="0" title="禁用" checked>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交编辑</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
// 	  layer.msg(data.)
//     layer.msg(JSON.stringify(data.field));
			//获取角色复选框的所有值
			var arr =new Array();
			var arr2 =new Array();
			$("input[name='role']:checked").each(function(index){
				arr[index] = $(this).val();
			});
			$("input[name='menu']:checked").each(function(index){
				arr2[index] = $(this).val();
			});
            $.ajax({
              url:"/userMg/updateOne",
              type:"POST",
              data:{
            	  user_id:$("#ID").val(),
            	  username:$("#add-username").val(),
            	  account:$("#add-account").val(),
            	  "department.department_id":$("#add-dep").val(),
            	  "organization.organization_id":$("#add-org").val(),
            	  status:$("input[name='status']:checked").val(),
                  rolestr:arr.join(","),
                  menustr:arr2.join(",")
              },
              dataType:'json',
              success:function(data) {
                if (data.code == 200) {
                  layer.close(layer.index);
                  layer.msg(data.msg);
                  table.reload('test');
                } else {
                  layer.msg(data.msg);
                }
              },
              error: function() {
                console.log("ajax error");
              }
            });
  });
});
</script>
	</body>
</html>
